<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width">
	<script src="${ctx}/static/sigma/sigma.concat.js"></script>
	<style type="text/css" media="all">
		body {
			padding-top: 60px;
			padding-bottom: 40px;
		}
	</style>
</head>
<body>
<div class="container-fluid">
	<div class="row">
		<h2 class="span12" id="post-title">Accessing node attributes</h2>

		<div class="span12 sigma-parent" id="sigma-example-parent">
			<div class="sigma-expand" id="sigma-example"></div>
		</div>
	</div>

	<script src="${ctx}/static/sigma/sigma.parseGexf.js"></script>
	<script type="text/javascript">
		function init() {
			var sigInst = sigma.init($('#sigma-example')[0]).drawingProperties({
				defaultLabelColor : '#fff'
			}).graphProperties({
				minNodeSize : 0.5,
				maxNodeSize : 10
			});

			sigInst.parseGexf('${ctx}/graph/2012-02-01/relation');

			(function() {
				var popUp;
				function attributesToString(attr) {
					return '<ul>' + attr.map(function(o) {
						return '<li>' + o.attr + ' : ' + o.val + '</li>';
					}).join('') + '</ul>';
				}

				function showNodeInfo(event) {
					popUp && popUp.remove();

					var node;
					sigInst.iterNodes(function(n) {
						node = n;
					}, [event.content[0]]);

					popUp = $('<div class="node-info-popup"></div>').append(
					attributesToString(node['attr']['attributes'])).attr('id', 'node-info' + sigInst.getID()).css({
						'display' : 'inline-block',
						'border-radius' : 10,
						'padding' : 5,
						'background' : '#fff',
						'color' : '#000',
						'box-shadow' : '0 0 4px #666',
						'position' : 'absolute',
						'left' : node.displayX,
						'top' : node.displayY + 15
					});

					$('ul', popUp).css('margin', '0 0 0 20px');

					$('#sigma-example').append(popUp);
				}

				function hideNodeInfo(event) {
					popUp && popUp.remove();
					popUp = false;
				}

				sigInst.bind('overnodes', showNodeInfo).bind('outnodes', hideNodeInfo).draw();
			})();
		}

		if(document.addEventListener) {
			document.addEventListener('DOMContentLoaded', init, false);
		} else {
			window.onload = init;
		}
	</script>

	<style type="text/css">
		/* sigma.js context : */
		.sigma-parent {
			position: relative;
			border-radius: 4px;
			-moz-border-radius: 4px;
			-webkit-border-radius: 4px;
			background: #222;
			height: 500px;
		}
		.sigma-expand {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
		}
	</style>
</div>
</body>
</html>
